<script setup lang="ts">
import Request from '@/api/axios'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const tableData = ref(null)
onMounted(async () => {
    await Request.get({
        url: `/training/list`
    })
        .then((response) => {
            tableData.value = response.info
        })
})


const columns = [
    {
        title: '名称',
        dataIndex: 'title',
        key: 'title'
    },
    {
        title: '描述',
        dataIndex: 'introduction',
        key: 'introduction'
    },
    {
        title: '拥有者',
        dataIndex: 'createdBy',
        key: 'createdBy'
    },
    {
        title: '起始时间',
        dataIndex: 'begin_at',
        key: 'begin_at'
    },
    {
        title: '时长',
        dataIndex: 'duration',
        key: 'duration'
    },
    {
        title: '热度',
        dataIndex: 'submission',
        key: 'submission'
    }
]
</script>

<template>
    <a-table :dataSource="tableData" :columns="columns" stripe class="w-full">
        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'title'">
                <a-button type="link" @click="router.push({ name: 'training', params: { id: record.id } })">{{
                    record.title
                }}</a-button>
            </template>
        </template>
    </a-table>
</template>

<style scoped></style>
